<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生过渡</title>
  </head>
  <style>
    img {
      transition: 1s all linear
    }

    .leave {
      opacity: 0;
      transform: scale(0.1) rotate(180deg)
    }

    .enter {
      opacity: 1;
      transform: scale(1) rotate(0)
    }
  </style>

  <body>
    <img src="../img/jianren.jpg" alt="">
    <button>变换</button>
  </body>
  <script>
    let img = document.querySelector('img');
    let btn = document.querySelector("button");
    let flag = true;
    btn.onclick = () => {
      if (flag) {
        img.className = 'leave'
      } else {
        img.className = 'enter'
      }
      //取反
      flag = !flag;
    }
  </script>

</html>